<!-- src/views/Login.vue -->
<template>
  <div class="login">
    <h2>登录页面</h2>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" placeholder="用户名" required />
      <input v-model="password" type="password" placeholder="密码" required />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const res = await login({ username: this.username, password: this.password })
        localStorage.setItem('token', res.token)
        this.$router.push('/')
      } catch (error) {
        alert('登录失败，请重试')
      }
    }
  }
}
</script>

<style scoped>
.login {
  padding: 40px;
  max-width: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
}
input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}
button {
  width: 100%;
  padding: 10px;
}
</style>